import './select.scss';
import Input, { InputProps } from '../input';
import React, { useRef, useState } from 'react';
import { DownIcon } from '../icon/icon';
import Popper from '../popper/popper';

export interface DropdownProps {
	options?: any[];
	value?: string;
	label?: string;
	children?: React.ReactNode;
	onChange?: (...args: any[]) => any;
}
export interface SelectProps extends DropdownProps {
	popperClassName?: string;
	className?: string;
	inputConfig: InputProps;
	showSearch?: boolean;
	prefix?: React.ReactNode;
	suffix?: React.ReactNode;
}

const Dropdown = (props: DropdownProps) => {
	const {
		options = [],
		value = 'value',
		label = 'label',
		children = '',
		onChange = () => {},
	} = props;
	return (
		<div className="hs-ui-select__dropdown">
			<div className="hs-ui-select__dropdown-wrapper">
				<div className='hs-ui-select__dropdown-arrow'></div>
				<ul className="hs-ui-select__dropdown-list">
					{children
						? children
						: options &&
						  options.length > 0 &&
						  options.map((option: any, index: number) => (
								<li
									className="hs-ui-select__list-item"
									onClick={(e) => {
										e.stopPropagation();
										console.log('onClick');
										onChange(option[value], value, option, e);
									}}
									key={index}
									value={option[value]}>
									{option[label]}
								</li>
						  ))}
				</ul>
			</div>
		</div>
	);
};
const Select = (props: SelectProps) => {
	const {
		popperClassName = '',
		className = '',
		options = [],
		value = 'value',
		label = 'label',
		inputConfig = {},
		showSearch = false,
		prefix = <></>,
		suffix = <></>,
		onChange,
	} = props;

	const [isOpenPopper, setIsOpenPopper] = useState<boolean>(false);
	const wrapperRef = useRef<HTMLDivElement>(null);
	const dropdownRef = useRef<HTMLDivElement>(null);

	const openDropdown = () => {
		console.log('openDropdown');
		if (dropdownRef.current) {
			dropdownRef.current.style.display = 'block';
			setIsOpenPopper(true);
		}
	};
	const hiddenDropdown = () => {
		console.log('hiddenDropdown');
		if (dropdownRef.current) {
			// setIsOpenPopper(false);
			// dropdownRef.current.style.display = 'none'
		}
	};
	return (
		<div className={`hs-ui-select ${className}`}>
			<div
				ref={wrapperRef}
				className="hs-ui-select__wrapper"
				onFocus={openDropdown}
				onBlur={hiddenDropdown}>
				<div className="hs-ui-select__prefix">{prefix}</div>
				<Input
					value={value}
					suffix={<DownIcon />}
					readOnly={!showSearch}
					{...inputConfig}></Input>
				<div className="hs-ui-select__suffix">{suffix}</div>
			</div>
			<div
				ref={dropdownRef}
				className="hs-ui-select__dropdown"
				style={{ width: '100%' }}>
				<Popper
					className={popperClassName}
					wrapperRef={wrapperRef}
					open={isOpenPopper}>
					{/* <Popper open={isOpenPopper}> */}
					<Dropdown
						options={options}
						value={value}
						label={label}
						onChange={onChange}></Dropdown>
				</Popper>
			</div>
		</div>
	);
};

export default Select;
